<template>
  <div>
    <v-card flat>
      <!-- 评论信息：作者、头像、时间、楼层 -->
      <v-container v-if="user" class="ma-0 pa-0" fill-height>
        <v-avatar class="mr-3" size="30">
          <img :src="user.avatar" alt="John" />
        </v-avatar>
        <span
          ><router-link
            :to="{ name: 'User', params: { username: user.username } }"
            >{{ user.full_name }}</router-link
          ></span
        >
        <span class="ml-2 green--text">#{{ floor }}</span>
      </v-container>
      <!-- 评论内容 -->
      <v-container class="ma-0 pa-0" fill-height>
        <!-- 空头像占位 -->
        <v-avatar class="mr-3" size="30"> </v-avatar>
        <p>{{ comment.content }}</p>
      </v-container>
    </v-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Comment",
  props: ["comment", "floor", "act_id"],
  data() {
    return {
      user: null,
      showEdit: false,
    };
  },
  // 加载评论作者信息
  mounted() {
    let id = this.comment.user_id;
    axios.get("user_by_id/" + id).then((res) => {
      this.user = res.data.user;
    });
  },
};
</script>

<style>
</style>